<template>
  <div class="yanzhengma">
    <div class="phone_number" :style="{'border-color':color}">
      <input
        type="text"
        placeholder="请输入您的手机号"
        v-model="phonenum"
        @input="phoneshow"
        :style="{'font-size': fontsize}"
        name="name"
        autocomplete="off"
      />
    </div>
    <div class="validation" :style="{'border-color':color}">
      <input
        type="text"
        placeholder="请输入验证码"
        v-model="validation"
        @input="xsure"
        :style="{'font-size': fontsize}"
        autocomplete="off"
      />
      <button @click="validationbtn" ref="time" :disabled="isdisabled">{{time}}</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "yanzhengma",
  data() {
    return {
      isdisabled: true,
      phonenum: "",
      validation: "",
      time: "发送验证码"
    };
  },
  props: ["fontsize", "color"],
  methods: {
    ...mapMutations(["setvalidation", "login"]),
    validationbtn() {
      this.axios.post("http://127.0.0.1:3000/validation").then(res => {
        this.$store.commit("setvalidation", res.data.msg);
        console.log(this.$store.state.validation);
      });
      var starttime = 0;
      var valtimer = setInterval(() => {
        starttime += 1;
        if (starttime == 15 * 60) {
          clearInterval(valtimer);
          valtimer = null;
          this.$store.commit("setvalidation", null);
        }
      }, 1000);
      var start = 3;
      this.time = start + "秒后重发";
      this.$refs.time.disabled = true;
      var timer = setInterval(() => {
        start -= 1;
        this.time = start + "秒后重发";
        if (start == 0) {
          clearInterval(timer);
          timer = null;
          this.time = "发送验证码";
          this.$refs.time.disabled = false;
        }
      }, 1000);
    },
    rephone() {
      if (/^1[3456789]\d{9}$/.test(this.phonenum)) {
        return true;
      } else {
        return false;
      }
    },
    phoneshow() {
      if (this.rephone()) {
        this.isdisabled = false;
      } else {
        this.isdisabled = true;
      }
    },
    xsure() {
      if (this.$store.state.validation == this.validation) {
        this.$emit("sure", {msg:"success",phonenum:this.phonenum});
      } else {
        this.$emit("sure", "no");
      }
    }
  }
};
</script>

<style scoped>
.phone_number {
  border-bottom: 1px solid;
  padding: 30px 0 5px 0;
}
.validation {
  border-bottom: 1px solid;
  padding: 30px 0 5px 0;
  display: flex;
  justify-content: space-between;
}
.phone_number input,
.validation input,
.validation button {
  outline: none;
  border: none;
  background: none;
  display: inline-block;
  height: 25px;
}
.validation button {
  cursor: pointer;
}
</style>






